<template>
  <div class="toolbox">
    <el-scrollbar height="600px">
      <div class="toolbox-item" :class="{ active: isActiveMenu ===  -1}" @click="isActiveMenu = -1">全部</div>
      <div
        class="toolbox-item"
        v-for="item in toolboxList"
        :key="item.id"
        :class="{ active: isActiveMenu === item.id }"
        @click="isActiveMenu = item.id"
      >{{ item.display_cn_name || item.display_name || item.name }}</div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import http from '@/api/index'

const isActiveMenu = ref(-1)
const toolboxList = ref()

const getToolbox = async () => {
  const params = {
    parent_id: 99120641221067,
    grouping: '',
    offset: 0,
    count: 500,
    order: { meta: 'name', type: 'asc' },
    meta: 'name',
    type: 'asc',
    client_version: 'v1.2.0',
  }

  const res = await http.api.getToolboxApi(params)
  if (res.result) {
    toolboxList.value = res.result.items
  }
}

onMounted(() => {
  getToolbox()
})

</script>

<style lang="scss" scoped>
.toolbox {
  .toolbox-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    // border-radius: 6px;
    cursor: pointer;
    &:hover{
      background-color: #333;
      color: #3484EA;
    }
    &.active {
      background-color: #333;
      color: #3484EA;
    }
  }
}
</style>
